<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>会员等级</span>
        </div>
      </template>
      <!-- 搜索区域 -->
      <el-form :model="searchForm" label-width="80px" class="search-form" :inline="true">
        <el-form-item label="等级名称">
          <el-input v-model="searchForm.name" size="small" placeholder="请输入等级名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
          <el-button size="small" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-button type="primary" plain :icon="Plus" size="small" @click="handleAddBtn"
          >新增属性</el-button
        >
      </el-row>
      <el-table v-loading="loading" :data="tableData" style="width: 100%; margin-top: 20px" border>
        <el-table-column prop="name" label="等级名称" width="130" align="center" />
        <el-table-column prop="growthPoint" label="所需成长值" width="130" align="center" />
        <el-table-column prop="defaultStatus" label="默认等级" align="center" width="130" />
        <el-table-column prop="freeFreightPoint" label="免运费标准" align="center" width="130" />
        <el-table-column
          prop="commentGrowthPoint"
          label="每次评价获取的成长值"
          align="center"
          width="180"
        />
        <el-table-column label="特权" align="center">
          <el-table-column
            prop="privilegeFreeFreight"
            label="免邮特权"
            width="120"
            align="center"
          />
          <el-table-column
            prop="privilegeMemberPrice"
            label="会员价格特权"
            width="120"
            align="center"
          />
          <el-table-column prop="privilegeBirthday" label="生日特权" width="120" align="center" />
        </el-table-column>
        <el-table-column prop="note" label="备注" align="center" width="150" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button size="small" type="warning" @click="handleEdit(scope.row.brandId)"
              >编辑</el-button
            >
            <el-button size="small" type="danger" @click="handleDelete(scope.row.brandId)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :size="size"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        style="margin-top: 10px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import { ref } from 'vue'
// 分页器当前的页码数
const pageNo = ref(1)
// 分页器每页显示多少条数据
const pageSize = ref(10)
//分页器大小
const size = ref('default')
//分页器背景样式
const background = ref(true)
// 总数据条数
const totalCount = ref(0)
/**
 * 搜索对象
 */
const searchForm = ref({
  name: ''
})
const tableData = ref([])
const handleSearch = () => {
  console.log('搜索')
}
const handleReset = () => {
  searchForm.value = {}
}

const handleAddBtn = () => {}

const handleSizeChange = val => {
  console.log(`每页 ${val} 条`)
}
const handleCurrentChange = val => {
  console.log(`当前页: ${val}`)
}
</script>
